<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>日期</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #009688;
      }

      .container {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        text-align: center;
      }

      .date {
        font-size: 100px;
      }

      .time {
        font-size: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p class="date" id="date"></p>
      <p class="time" id="time"></p>
    </div>

    <script>
      window.onload = function () {
        function setDay() {
          const date = new Date();
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();
          document.getElementById(
            "date"
          ).innerHTML = `${year}年${month}月${day}日`;
        }

        function setTime() {
          const date = new Date();
          const hour = date.getHours();
          const min = date.getMinutes();
          const second = date.getSeconds();
          document.getElementById(
            "time"
          ).innerHTML = `${hour}:${min}:${second}`;
        }
        
        setDay();
        setTime();
        setInterval(setTime, 1000);
      };
    </script>
  </body>
</html>
